<template>
  <div>
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-main class="main">
        <el-row>
          <el-col :span="20" :offset="3">
            <el-card  style="padding-bottom: 20px;width: 90%;">
              <div>
                <el-row>
                  <el-col :span="4" class="image">
                    <img class="major_header" src="https://storage-oss.ipin.com/logo/major/52aedf5b747aec1cfc84157c.jpg" />
                  </el-col>
                  <el-col :span="10">
                    <el-row>
                      <el-col :span="21"><div class="name"><p>{{major.name}}</p></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24" style="margin-top: 20px">
                        <el-button round type="view">{{major.type}}</el-button>
                        <el-button round type="view">本科</el-button>
                        <el-button round type="view">四年制</el-button>
                        <el-button round type="view">学士学位</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">专业介绍</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{major.describes}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">培养目标</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{major.goal}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">培养要求</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{major.needed}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">知识能力</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{major.ability}}
            </el-card>
          </el-col>
          <el-col :span="20" :offset="3" style="margin-top: 20px">
            <div class="chaxunjieguo yxtuijian" style="margin-bottom: 10px">主要课程</div>
            <el-card style="padding-bottom: 20px;width: 90%">
              {{major.courses}}
            </el-card>
          </el-col>
        </el-row>
      </el-main>
      <el-footer><Footer></Footer></el-footer>
    </el-container>
  </div>
</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "major",
        components:{Header,Footer},
        data() {
            return {
                major:{},
                id:"",
                name:""
            }
        },
        methods:{
            queryMajorByName(){
                const _this = this;
                this.$axios.get("http://localhost:8080/majors/queryMajorByName?name="+this.name).then((res)=>{
                    console.log(res.data);
                    console.log(this.name);
                    console.log(location.href);
                    _this.major = res.data;
                });
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='../admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            this.name = this.$route.params.majorName;
            console.log(this.name)
            this.queryMajorByName();
        }
    }
</script>

<style scoped>
  .el-main{
    margin-top: 70px;
  }
  .image{
    width: 200px;
    height: 160px;
    padding: 15px 30px 10px 30px;
  }
  div .el-row{
    margin: 0;
  }

  .name{
    height: 70px;
    padding-top: 0px;
  }
  .name p{
    font-size: 40px;
    font-weight: 800;
    margin: 0;
    margin-top: 10px;
  }
  .city p{
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    margin-top: 28px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .yxtuijian{
    border-left: rgb(23, 100, 182) 5px solid;
    padding-left: 20px;
    font-size: 2em;
  }
  .major_header{
    width: 120px;
  }
</style>
